<template>
    <div class="top">
        <h1>cnode</h1>
        <input type="text" />
        <ul>
            <li>首页</li>
            <li>新手入门</li>
            <li>API</li>
            <li>关于</li>
            <li>注册</li>
            <li>登录</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {},
};
</script>

<style lang="scss">
.top {
    width: 100%;
    height: 150px;
    background-color: gray;
    h1 {
        color: #fff;
        font-size: 50px;
        margin-left: 20px;
    }
    input {
        width: 70%;
        height: 30px;
        border-radius: 10px;
        border: none;
        margin-left: 20px;
    }
    ul {
        width: 100%;
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        li {
            width: 16%;
            height: 60px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
